<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>受控组件</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库  优先 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom用于支持react操作DOM，依赖react核心库 -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script type="text/javascript" src="../js//babel.min.js"></script>
    <script type="text/babel">
      // 1.受控组件：数据输入 就会维护到状态里面去，需要的时候在状态里面取出来 这就是受控组件
      // 高阶函数:如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
      // 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
      // 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

      // 函数的柯里化:通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
      class Demo extends React.Component {
        state = { username: "", password: "" };
        saveData = (titleString, event) => {
          this.setState(
            {
              [titleString]: event.target.value,
            },
            () => {
              console.log("this.state", this.state);
            }
          );
        };
        render() {
          return (
            <form action="" onSubmit={this.login}>
              用户名：
              <input
                type="text"
                onChange={(event) => {
                  this.saveData("username", event);
                }}
                name="username"
              />
              密码：
              <input
                type="password"
                onChange={(event) => {
                  this.saveData("password", event);
                }}
                name="password"
              />
              <button type="submit">登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>
